<template>
	<view class="page">
		<!-- <view class="card">
			<view class="card-title">问题原因<text class="card-must">*</text></view>
			<view class="card-body">
				<view class="card-type">
					<view
						v-for="(v, k) in typeData"
						:key="k" 
						:class="'card-type-item ' +(k === typeSelected ? 'card-type-item-active' : '')"
						@click="typeSelected = k"
					>
						{{v}}
					</view>
				</view>
			</view> -->
		<view class="card">
			<view class="card-title"><text class="card-must">{{$t('feedBack.questionDes')}}</text></view>
			<view class="card-body">
				<textarea :placeholder="$t('feedBack.desDetail')" @blur="bindTextAreaBlur"></textarea>
			</view>
		</view>
		<view class="card">
			<view class="card-title">{{$t('feedBack.uploadImg')}}（{{imgData.length}}/6）</view>
			<view class="card-body">
				<view class="card-imgs">
					<view class="card-imgs-item" v-for="(v, k) in imgData" :key="k">
						<image :src="v" />
						<view class="card-imgs-item-mask" v-if="v.uploading">
							{{$t('feedBack.uploading')}}
						</view>
						<view class="card-imgs-item-del" @click="deleteItem(k)">
							<image src="/static/feedback/del.png"></image>
						</view>
					</view>
					<view class="card-imgs-upload" v-if="imgData.length < 6" @click="chooseImages">
						<image src="/static/feedback/upload.png" />
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">{{$t('feedBack.connectType')}}<text class="card-must">*</text></view>
			<view class="card-body">
				<input :placeholder="$t('feedBack.phoneNum')" @input="changePhoneContent" />
			</view>
		</view>
		<view class="button" @click="feedBack">{{$t('feedBack.submit')}}</view>
	</view>
</template>

<script>
	import {
		apiUserUploadImage,
		apiUserGetId,
		apiUserFeedBack
	} from '../../api/user_api';
	import {
		i18nTool
	} from '../../utils/i18en';
	export default {
		data() {
			return {
				typeData: ['功能异常', '产品建议', '充值问题', '其他问题'],
				typeSelected: 0,
				imgData: [

				],
				typeId: "",
				imagePathUrl: [],
				param: {},
				feedbackParam: {
					description:'',
					contact:'',
					imgs:'',
					id:''
				}
			}
		},
		async onLoad() {
			uni.setNavigationBarTitle({
				title: i18nTool('feedBack.navTitle')
			})
			let res = await apiUserGetId({
				type: 3
			});
			if (res.status == 0) {
				this.typeId = res.content;
				this.feedbackParam.id = this.typeId
			}
		},
		methods: {
			bindTextAreaBlur: function(e) {
				console.log(e.detail.value)
				this.feedbackParam.description = e.detail.value;
			},
			changePhoneContent(e){
				this.feedbackParam.contact = e.detail.value;
			},
			async uploadImage(path) {
				this.param = {
					filePath: path
				};
				let res = await apiUserUploadImage(this.param);
				this.imagePathUrl.push(res.content.url);
			},
			chooseImages() {
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.imgData = res.tempFilePaths;
						for (let i = 0, len = this.imgData.length; i < len; i++) {
							this.uploadImage(this.imgData[i]);
						}
					}
				});
			},

			deleteItem(index) {
				this.imgData.splice(index, 1);
				this.imagePathUrl.splice(index, 1);
			},
			async feedBack() {
				this.feedbackParam.imgs = JSON.stringify(this.imagePathUrl);
				uni.showLoading({
					title:"loading...",
					mask:true
				})
				let res = await apiUserFeedBack(this.feedbackParam);
				uni.hideLoading();
				uni.navigateBack();
			}

		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>